<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-19 20:18:41
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-19 20:51:24
 * @FilePath: \vue-01\src\作业3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <span>欢迎光临vue开发的水果店</span>
    <h3>苹果10￥/斤,折扣8折 </h3>
    <!--  -->
    请输入你要购买的苹果斤数<input type="text" v-model.number.trim="count">
    <br>
    <!-- 设置点击事件 -->
    <button @click="btnFn">结账买单~</button>
    <p>结账单:总价 {{count1}}￥元,折后价:{{count2}} ￥,省了：{{count3}}￥元</p>
  </div>
</template>

<script>
export default {
data () {
    return {
        count:'',
        count1:'',
        count2:'',
        count3:''
        
    }
},
methods: {
    btnFn(){
        this.count1= this.count*10,
        this.count2 = this.count1*0.8
        this.count3 = this.count1-this.count2
    }
},
}
</script>

<style>

</style>